<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="vue/vue.js"></script>
    <title>组件</title>
    <style>
        .post-item {
            background-color: bisque;
            margin-left: 1%;
            margin-right: 1%;
            margin-bottom: 3rem;
            padding: 20px;
            border-radius: 1%;
            box-shadow: 10px 10px 10px bisque;
        }
    </style>
</head>

<body>

    <div id="blog-post">
        <blog-post class="post-item" v-for="post in posts" v-bind:post="post" v-bind:key="post.id"
            v-bind:style="{fontSize:postFontSize+'px'}" v-on:enlarge-text="onEnlargeText">
        </blog-post>
        <ol>
            <li v-for="item in items">
                {{item.message}}
            </li>
        </ol>

    </div>

    <script>
        console.log({}.__proto__)
        Vue.component("blog-post", {
            props: ["post", "postFontSize"],
            template: `
            <div class="blog-post" style="font-size:postFontSize+'px'">
                <h3>{{post.title}} ID:{{post.id}}</h3>
                <button v-on:click="$emit('enlarge-text',2)"> Enlarge text </button>
                <div v-html="post.body"></div>
            </div>
            `
        })

        new Vue({
            el: "#blog-post",
            data: {
                posts: [],
                postFontSize: 20,
                items:[]
            },
            methods: {
                onEnlargeText: function (size) {

                    this.postFontSize += size
                    console.log(this.postFontSize)
                }
            },
            created: function () {
                var vm = this;
                var i = 10;
                while(i>0){
                    vm.items.push({message:"i am message "+i});
                    i--;
                }
                fetch("https://jsonplaceholder.typicode.com/posts")
                    .then(function (res) {
                        var json = res.json()
                        console.log(json)
                        return json
                    })
                    .then(function (data) {
                        vm.posts = data;
                    })
            }
        })
    </script>

</body>

</html>